<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>vuejs练习</title>
	<link rel="stylesheet" type="text/css" href="index.css">

	<script type="text/x-template" id="grid-template">
		<table>
			<thead>
			<tr>
				<th v-for="key in columns"
					@click="sortBy(key)"
					:class="{active: sortKey == key}">
					{{key | capitalize}}
					<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
				</th>
			</tr>
			</thead>
			<tbody>
			<tr v-for="entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]">
				<td v-for="key in columns">
					{{entry[key]}}
				</td>
			</tr>
			</tbody>
		</table>
	</script>
</head>
<body>
<div id="demo">
	<form id="search">
		Search<input name="query" v-model="searchQuery">
	</form>

	<demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
	</demo-grid>
</div>
<script src='../vue.min.js'></script>
<script src="index.js"></script>

</body>
</html>
